<template>
  <div class="container">
    <div class="router_container">
      <RouterView></RouterView>
    </div>
    <div class="nav-container">
    <RouterLink to="/login">登录</RouterLink>
    &nbsp;&nbsp;&nbsp;
    <RouterLink to="/main">首页</RouterLink>
    </div>
  </div>
</template>

<script setup>
 // vue-router: https://router.vuejs.org/installation.html
 // Step1: npm install vue-router@4
 // Step2: 通过RouterView进行行占位
 // Step3: 通过createRouter创建路由器
 // Step4: 将路由器挂载至App
 // Step5: 通过RouterLink进行页面导航
</script>

<style scoped>
  .container {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .router_container {
    width: 80%;
    height: 60%;
  }
</style>